<template>
    <div ref="container">
        <konva-stage :config="configKonva">
            <konva-layer>
                <konva-rect :config="rect1"></konva-rect>
                <konva-line :config="configLine1"></konva-line>
                <konva-line :config="configLine2"></konva-line>
                <konva-line :config="configLine3"></konva-line>
                <konva-line :config="configLine4"></konva-line>
                <konva-line :config="configLine5"></konva-line>
                <konva-line :config="configLine6"></konva-line>
                <konva-line :config="configLine7"></konva-line>
                <konva-line :config="configLine8"></konva-line>
                <konva-line :config="configLine9"></konva-line>
                <konva-line :config="configLine10"></konva-line>
            </konva-layer>
        </konva-stage>
    </div>
</template>

<script>
export default {
    name: "Playback",
    data() {
        return {
            configKonva: {
                width: 1200,
                height: 800,
            },
            configLine1: {
                points: [0, 400, 1200, 400],
                stroke: "yellow",
                strokeWidth: 4,
                lineCap: "round",
                // lineJoin: "round",
            },
            configLine2: {
                points: [600, 0, 600, 800],
                stroke: "yellow",
                strokeWidth: 4,
                lineCap: "round",
            },
            configLine3: {
                points: [550, 0, 550, 800],
                stroke: "yellow",
                strokeWidth: 4,
                lineCap: "round",
            },
            configLine4: {
                points: [650, 0, 650, 800],
                stroke: "yellow",
                strokeWidth: 4,
                lineCap: "round",
            },
            configLine5: {
                points: [0, 350, 1200, 350],
                stroke: "yellow",
                strokeWidth: 4,
                lineCap: "round",
            },
            configLine6: {
                points: [0, 450, 1200, 450],
                stroke: "yellow",
                strokeWidth: 4,
                lineCap: "round",
            },
            configLine7: {
                points: [0, 425, 1200, 425],
                stroke: "white",
                strokeWidth: 2,
                lineCap: "round",
                dash: [10, 8],
            },
            configLine8: {
                points: [0, 375, 1200, 375],
                stroke: "white",
                strokeWidth: 2,
                lineCap: "round",
                dash: [10, 8],
            },
            configLine9: {
                points: [575, 0, 575, 800],
                stroke: "white",
                strokeWidth: 2,
                lineCap: "round",
                dash: [10, 8],
            },
            configLine10: {
                points: [625, 0, 625, 800],
                stroke: "white",
                strokeWidth: 2,
                lineCap: "round",
                dash: [10, 8],
            },
            rect1: {
                x: 0,
                y: 0,
                width: 1200,
                height: 800,
                fill: "#464c5b",
            },
        };
    },
    methods: {},
};
</script>

<style scoped>
div {
    color: black;
}
</style>
